<template>
  <div>
    <!-- Form -->
    <span @click="set" class="edit" v-if="_SHOWBTN(showBetCode6)">设置</span>
    <el-dialog title="权限分配" :visible.sync="dialogFormVisible" width="357px">
      <!-- tab切换 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="功能权限" name="first">
          <div class="tree">
            <el-tree
              :data="data"
              show-checkbox
              node-key="id"
              ref="tree"
              @check-change="change"
              highlight-current
              :default-checked-keys="funct"
              :props="defaultProps"
            ></el-tree>
          </div>
        </el-tab-pane>
        <el-tab-pane label="数据权限" name="second">
          <el-radio-group v-model="radio">
            <!-- <el-radio :label="this.radio" v-if="this.radio == 1" hidden>集团总部</el-radio> -->
            <!-- <br /> -->
            <el-radio :label="this.radio" v-if="this.radio == 2" >所属公司</el-radio>
            <!-- <br /> -->
          </el-radio-group>
          <!-- 树形 -->
          <div class="tree" v-if="this.radio==1">
            <el-tree
              ref="orgTree"
              :data="companyTree"
              show-checkbox
              node-key="id"
              :props="defaultProps1"
              :default-checked-keys="information"
            ></el-tree>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!--结束-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Upload from "@/components/Upload/Upload.vue";
export default {
  props: ["id", "get", "showBetCode6"],
  components: {
    Upload,
  },
  data() {
    return {
      // 功能权限ID
      funct: [],
      // 数据权限
      information: [],
      // 角色类型
      type: [],
      ids: [],
      // 上传ID集合
      ids1: [],
      //文本框
      textarea: "",
      dialogFormVisible: false,
      activeName: "first",
      radio: [],
      ruleForm: {
        name: "",
        region: "",
      },
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        region: [
          { required: true, message: "请选择组织类型", trigger: "change" },
        ],
      },
      // 角色资源树
      data: [],
      data2: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 角色公司树
      companyTree: [],
      defaultProps1: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {
    // 设置
    set() {
      this.dialogFormVisible = true;
      // 当前角色树
      (this.data2 = []), (this.companyTree = []);
      this.Api.treeRole({ id: this.id }).then((res) => {
        // console.log(res);
        this.data = res.data;
        this.getLeafKeys(this.data, this.funct);
      });
      // 角色详情
      this.Api.editRole({ id: this.id }).then((res) => {
        this.data2 = res.data;
        this.type = res.data.type;
        this.radio = res.data.type;
      });
      // 公司树
      this.Api.companyRole({ id: this.id }).then((res) => {
        this.companyTree = res.data;
        // console.log(this.companyTree);
        this.getLeafKeys(this.companyTree, this.information);
        // this.information = [this.companyTree.parentId];
      });
    },
    // 递归获取权限的id
    getLeafKeys(node, arr) {
      // console.log(node, 777);
      // 如果当前对象没有children，将当前对象的id添加到数组中
      node.forEach((res) => {
        if (res.children.length == 0) {
          if (res.checked == true) {
            arr.push(res.id);
          }
          return;
        } else {
          this.getLeafKeys(res.children, arr);
        }
      });
    },

    handleClick(tab, event) {
      // console.log(this.$refs.tree, "tree");
      // console.log(this.$refs.orgTree, "orgTree");
      // console.log(tab, "tab");
      // this.set();
    },
    // 获取id
    change(data) {
      this.ids = this.$refs.tree.getCheckedKeys();
    },
    sure() {
      let resIds = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys());
      console.log(this.$refs.orgTree);
      let orgIds = this.$refs.orgTree
        ? this.$refs.orgTree.getCheckedKeys()
        : [];
      console.log(orgIds);
      resIds = resIds.map((item) => ({ id: item }));
      orgIds = orgIds.map((item) => ({ id: item }));
      this.dialogFormVisible = false;
      this.Api.resetRole({
        orgIds,
        resIds,
        id: this.id,
      }).then((res) => {
        this.get()
        history.go(0);
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-button--NewlyBuild {
  width: 80px;
  height: 36px;
  background: rgba(61, 127, 255, 1);
  border-radius: 3px;
  padding: 0;
  color: white;
  margin-right: 10px !important;
}
/deep/.el-dialog__wrapper {
  z-index: 9999 !important;
  .el-dialog {
    .el-dialog__header {
      background: rgba(230, 233, 237, 1);
      border-radius: 8px 8px 0px 0px;
      border: 1px solid rgba(230, 233, 237, 1);
      padding: 11px 20px 11px 24px;
      .el-dialog__title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 24px;
        padding-right: 235px;
      }
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .el-dialog__body {
      padding: 30px 43px 0 20px;
    }
    .el-dialog__footer {
      padding: 30px 30px 26px;
      .dialog-footer {
        .el-button--default {
          width: 70px;
          height: 36px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
          border: 1px solid rgba(215, 219, 224, 1);
          padding: 0;
          color: rgba(51, 51, 51, 1);
        }
        .el-button--primary {
          width: 70px;
          height: 36px;
          background: rgba(61, 127, 255, 1);
          border-radius: 3px;
          padding: 0;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
}

.edit {
  display: block;
  color: #1677ff;
  font-size: 14px;
  border-left: none;
  width: 48px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  border-left: 1px solid #dddddd;
}
/deep/.el-radio__label {
  display: inline-block;
  font-size: 14px;
  padding-left: 10px;
  width: 56px;
  margin: 10px;
}
.el-radio-group {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  margin-left: -61px;
}
.tree {
  margin-left: 20px;
  height: 200px;
  overflow: auto;
}
</style>